<!--Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>酒店预订</title>
    <link href="http://localhost:8080/hotle/css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://localhost:8080/hotle/js/jquery-1.11.0.min.js"></script>
    <!-- Custom Theme files -->
    <link href="http://localhost:8080/hotle/css/style.css" rel="stylesheet" type="text/css" media="all"/>
    <!-- Custom Theme files -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="Mr Hotel Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!--Google Fonts-->
    <link href='//fonts.googleapis.com/css?family=Hind:400,300' rel='stylesheet' type='text/css'>
    <link href='//fonts.googleapis.com/css?family=Aladin' rel='stylesheet' type='text/css'>
    <!--google fonts-->
    <!-- animated-css -->
    <link href="http://localhost:8080/hotle/css/animate.css" rel="stylesheet" type="text/css" media="all">
    <script src="http://localhost:8080/hotle/hotle/js/wow.min.js"></script>
    <script>
        new WOW().init();
    </script>
    <!-- animated-css -->
    <script src="http://localhost:8080/hotle/js/bootstrap.min.js"></script>
</head>
<body>
<!--header-top start here-->
<!-- <div class="top-header">
	<div class="container">
		<div class="top-header-main">
			<div class="col-md-4 top-social wow bounceInLeft" data-wow-delay="0.3s">
			    <ul>
			    	<li><h5>Follow Us :</h5></li>
			    	<li><a href="#"><span class="fb"> </span></a></li>
			    	<li><a href="#"><span class="tw"> </span></a></li>
			    	<li><a href="#"><span class="in"> </span></a></li>
			    	<li><a href="#"><span class="gmail"> </span></a></li>
			    </ul>
			</div>
			<div class="col-md-8 header-address wow bounceInRight" data-wow-delay="0.3s">
				<ul>					
					<li><span class="phone"> </span> <h6>(220) 280-31589</h6></li>
					<li><span class="email"> </span><h6><a href="mailto:info@example.com">Youremail@gmail.com</a></h6></li>
				</ul>
			</div>
		  <div class="clearfix"> </div>
		</div>
	</div>
</div> -->
<!--header-top end here-->
<!--header start here-->
<!-- NAVBAR
    ================================================== -->
<div class="header">
    <div class="fixed-header">

        <div class="navbar-wrapper">
            <div class="container">
                <nav class="navbar navbar-inverse navbar-static-top">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                                data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <div class="logo wow slideInLeft" data-wow-delay="0.3s">
                            <a class="navbar-brand" href="HotleMain.html"><img
                                    src="http://localhost:8080/hotle/images/logo.png"/></a>
                        </div>
                    </div>
                    <div id="navbar" class="navbar-collapse collapse">
                        <nav class="cl-effect-16" id="cl-effect-16">
                            <ul class="nav navbar-nav">
                                <li><a href="HotleMain.html" data-hover="首页">首页</a></li>
                                <li><a class="active" th:href="@{/users/findHotleToReception}"
                                       data-hover="酒店预订">酒店预订</a></li>
                                <!--<li><a href="HotleSelected.html" data-hover="精选酒店">精选酒店</a></li>-->
                                <!--<li><a href="room.html" data-hover="Rooms">Rooms</a></li>-->
                                <li><a th:href="@{/users/findOrderByUser}" data-hover="我的订单">我的订单</a></li>
                                <li><a th:href="@{/users/UserCount}" data-hover="帐号管理">帐号管理</a></li>
                            </ul>
                        </nav>

                    </div>
                    <div>


                    </div>
                    <div class="clearfix"></div>
                </nav>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<!--header end here-->
<!--about start here-->
<div class="about">
    <div class="container">
        <div class="about-main">
            <div class="about-top">
                <h1>预定界面</h1>
                <div class="col-md-3 ftr-grid ftr-rit wow zoomIn" data-wow-delay="0.3s">
                    <!--<h3 style="width: 200%">您当前的位置：首页>预定酒店>搜索城市</h3>-->
                    <form style="width: 300%;margin-left: 100%;" action="/users/searchHotle">
                        <input name="hotleCity" type="text" value="搜索所在城市" onfocus="this.value = '';"
                               onblur="if (this.value == '') {this.value = '搜索所在城市 ';}">
                        <input type="submit" value="搜索"/>
                    </form>

                </div>
            </div>

            <div class="about-bottom">

                <div class="col-md-7 about-right wow bounceInRight" data-wow-delay="0.3s">
                    <!-- <h4>To take a trivial example</h4>
                    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> -->

                    <table>
                        <tr th:each="hotle:${list}">
                            <div class="about-list">
                                <!--<div>-->
                                <span>
                                    <img th:src="'/manage/images/'+${hotle.hotleImg}" style="width: 20%"/>
                                    </span>
                                <!--</div>-->
                                <div class="about-text">
                                    <h5><a th:href="@{singleDeal(hotlename=${hotle.hotlename})}"
                                           th:text="${hotle.hotlename}">酒店名</a></h5>
                                    <p id="message" th:text="${hotle.hotleDec}">信息</p>
                                    <p id="location">地址:<span th:text="${hotle.hotleCity}"></span></p>
                                </div>

                                <div class="clearfix"></div>
                            </div>
                        </tr>
                        <ul class="pagination" style="padding: 10px">
                            <li><a th:href="@{/users/findHotleToReception(pageNumber=1,hotleCity=${city})}">首页</a></li>
                            <li><a th:href="@{/users/findHotleToReception(pageNumber=${pageNo}-1,hotleCity=${city})}">上一页</a></li>
                            <li><a th:href="@{/users/findHotleToReception(pageNumber=${pageNo}+1,hotleCity=${city})}">下一页</a></li>
                            <li><a th:href="@{/users/findHotleToReception(pageNumber=${maxPage},hotleCity=${city})}">尾页</a></li>
                        </ul>
                    </table>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>
<!--about end here-->
<!--about advantages start here-->
<!-- <div class="advantages">
	<div class="container">
		<div class="advantages-main">
			<div class="advantages-top">
				<h2>Our Advantages</h2>
			</div>
		   <div class="advantage-bottom">
			 <div class="col-md-4 advantage-grid wow bounceInLeft" data-wow-delay="0.3s">
			 	<div class="advantage-block">
			 		<h3>01</h3>
			 		<h4>Eveniet voluptates</h4>
			 		<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.</p>
			 	</div>
			 </div>
			 <div class="col-md-4 advantage-grid wow zoomIn" data-wow-delay="0.3s">
			 	<div class="advantage-block">
			 		<h3>02</h3>
			 		<h4>Voluptates repudiandae</h4>
			 		<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.</p>
			 	</div>
			 </div>
			 <div class="col-md-4 advantage-grid wow bounceInRight" data-wow-delay="0.3s">
			 	<div class="advantage-block">
			 		<h3>03</h3>
			 		<h4>Molestiae recusandae</h4>
			 		<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.</p>
			 	</div>
			 </div>
			<div class="clearfix"> </div>
			</div>
		</div>
	</div>
</div>
about advantages end here -->
<!-- team start here-->
<!-- <div class="team">
	<div class="container">
	   <div class="team-main">
	   	   <div class="team-top">
	   	   	  <h3>Our Chefs</h3>
	   	   </div>	   	  
		   <div class="team-bottom wow fadeInRight" data-wow-delay="0.3s">
			  <div class="col-md-3 team-grids">
			    normal
			    <div class="ih-item circle effect5">
			        <div class="img"><img src="images/t1.jpg" alt="img" class="img-responsive"></div>
			        <div class="info">
			          <div class="info-back">
			            <h3>Malorum</h3>		          
			          </div>			          
			        </div></div>
			        <div class="team-bottom">
			        	  <p>On the other hand, we denounce with righteous indignation.</p>
			        	  <ul>
			        	  	<li><a href="#" class="fa"> </a></li>
			        	  	<li><a href="#" class="tw"> </a></li>
			        	  	<li><a href="#" class="g"> </a></li>
			        	  </ul>
			        </div>
			        
			    end normal
			   </div>
			  <div class="col-md-3 team-grids">
			   normal
			    <div class="ih-item circle effect5">
			        <div class="img"><img src="images/t2.jpg" alt="img" class="img-responsive"></div>
			        <div class="info">
			          <div class="info-back">
			            <h3>Bonorum</h3>		           	            
			          </div>
			        </div></div>
			        <div class="team-bottom">
			        	  <p>On the other hand, we denounce with righteous indignation.</p>
			        	  <ul>
			        	  	<li><a href="#" class="fa"> </a></li>
			        	  	<li><a href="#" class="tw"> </a></li>
			        	  	<li><a href="#" class="g"> </a></li>
			        	  </ul>
			        </div>
			    end normal		 
			  </div>
			  <div class="col-md-3 team-grids">
			    normal
			    <div class="ih-item circle effect5">
			        <div class="img"><img src="images/t3.jpg" alt="img" class="img-responsive"></div>
			        <div class="info">
			          <div class="info-back">
			            <h3>Finibus</h3>			       
			          </div>
			        </div></div>
			        <div class="team-bottom">
			        	  <p>On the other hand, we denounce with righteous indignation.</p>
			        	  <ul>
			        	  	<li><a href="#" class="fa"> </a></li>
			        	  	<li><a href="#" class="tw"> </a></li>
			        	  	<li><a href="#" class="g"> </a></li>
			        	  </ul>
			        </div>
			    end normal
			  </div>
			   <div class="col-md-3 team-grids">
			    normal
			    <div class="ih-item circle effect5">
			        <div class="img"><img src="images/t4.jpg" alt="img" class="img-responsive"></div>
			        <div class="info">
			          <div class="info-back">
			            <h3>Rackham</h3>		           
			          </div>
			        </div></div>
			        <div class="team-bottom">
			        	  <p>On the other hand, we denounce with righteous indignation.</p>
			        	  <ul>
			        	  	<li><a href="#" class="fa"> </a></li>
			        	  	<li><a href="#" class="tw"> </a></li>
			        	  	<li><a href="#" class="g"> </a></li>
			        	  </ul>
			        </div>
			    end normal			 
			  </div>
			</div>
		</div>
	</div>
</div> -->
<!--team end here-->
<!--footer start here-->
<!-- <div class="footer">
	<div class="container">
		<div class="footer-main">
			<div class="col-md-3 ftr-grid wow zoomIn" data-wow-delay="0.3s">
				<div class="ftr-logo">
				<img src="images/ftr-logo.png"  alt="">
				</div>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
				<a href="single.html" class="ftr-btn">Read More</a>
			</div>
			<div class="col-md-3 ftr-grid ftr-mid wow zoomIn" data-wow-delay="0.3s">
				 <h3>Address</h3>
				 <span class="ftr-line flm"> </span>
				<p>Eye Associates Of Virginia?</p>
				<p>5875 Bremo Road </p>
				<p>Richmond, VA(Virginia) 23226 </p>
				<p>(804) 287-4216 </p>
				<p>Alice Merriman</p>
				
			</div>
			<div class="col-md-3 ftr-grid ftr-rit wow zoomIn" data-wow-delay="0.3s">
				 <h3>Contact Us</h3>
				 <form>
				 	<input type="text" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}">
				 	<input type="submit" value="Send" />
				 </form>
				  <ul class="ftr-icons">
				 	<li><a href="#"><span class="fa"> </span></a></li>
				 	<li><a href="#"><span class="tw"> </span></a></li>
				 	<li><a href="#"><span class="link"> </span></a></li>
				 	<li><a href="#"><span class="gmail"> </span></a></li>
				 </ul>
			</div>
			<div class="col-md-3 ftr-grid ftr-last-gd ftr-rit wow zoomIn" data-wow-delay="0.3s">
				 <h3>Quick Link</h3>
				  <ul class="ftr-nav">
				 	<li><a href="index.html">Home</a></li>
				 	<li><a href="about.html">About</a></li>
				 	<li><a href="services.html">Services </a></li>
				 	<li><a href="room.html">Rooms</a></li>
				 	<li><a href="contact.html">Contact</a></li>
				 </ul>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
</div> -->
<!--footer end here-->
<!--copy rights start here-->
<!-- <div class="copy-right">
	<div class="container">
		 <div class="copy-rights-main wow zoomIn" data-wow-delay="0.3s">
    	    <p>© 2016 Mr Hotel. All Rights Reserved | Design by  <a href="http://w3layouts.com/" target="_blank">W3layouts</a> </p>
    	 </div>
    </div>
</div> -->
</body>
</html>
